<!--  -->
<template>
  <div class='payRecored'>
    <el-dialog
      title="缴纳记录"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <avue-crud
        ref="crud"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOptions"
        @size-change="sizeChange"
        @current-change="currentChange"
        @selection-change="selectionChange"
        @refresh-change="refreshChange"
      >
        <template slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-notebook-2"
            @click="pay"
          >
            缴费
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-tickets"
            @click="invoice"
          >
            开票
          </el-button>
        </template>
        <template
          slot="buildingType"
          slot-scope="scope"
        >
          {{scope.row.buildingType | getBuildingType(that)}}
        </template>
        <template
          slot-scope="scope"
          slot="menu"
        >
          <el-button
            size="small"
            type="text"
            @click="detail(scope.row.id)"
          >查看</el-button>
          <el-button
            size="small"
            type="text"
            @click="exportExcel(scope.row.id)"
          >下载</el-button>
        </template>
      </avue-crud>
    </el-dialog>
    <detail ref="detail"></detail>
    <pay
      ref="pay"
      @refreshList='refreshList'
    ></pay>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { tableOptions } from '@/const/crud/mrcost'
import { fetchList } from '@/api/mrcost'
import detail from './detail'
import { getDicType, ExportFile } from '@/api/common'
import pay from '@/components/invoice/pay'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { detail, pay },
  data () {
    // 这里存放数据
    return {
      searchForm: {
        chargeType: 0,
        companyId: ''
      },
      dialogVisible: false,
      tableOptions: tableOptions,
      buidingOptions: [],
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      that: this
    }
  },
  filters: {
    getBuildingType (value, that) {
      let str = ''
      that.buidingOptions.forEach(item => {
        if (value == item.value) {
          str = item.label
        }
      })
      return str
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    pay () {
      let IsPay = true
      let indexList = []
      this.selectList.forEach((item, index) => {
        if (item.isPayment == 1) {
          IsPay = false
          indexList.push(item.$index + 1)
        }
      })
      if (IsPay) {
        this.$refs.pay.init(this.selectList, 2)
      } else {
        this.$alert('<div>以下数据序号存在已缴费</div><div>序号分别为<span style=\'font-size:18px;font-weight: bold;\'>[' + indexList + ']</span></div>', '缴费提示', {
          dangerouslyUseHTMLString: true
        });
      }
    },
    invoice () {
      let IsPay = true
      let indexList = []
      this.selectList.forEach((item, index) => {
        if (item.isPayment == 0 || item.isInvoice == 0) {
          IsPay = false
          indexList.push(item.$index + 1)
        }
      })
      if (IsPay) {
        this.$refs.pay.init(this.selectList, 2, null, 1)
      } else {
        this.$alert('<div>勾选数据中存在未缴费或已开票的数据</div><div>序号分别为<span style=\'font-size:18px;font-weight: bold;\'>[' + indexList + ']</span></div>', '开票提示', {
          dangerouslyUseHTMLString: true
        });
      }
    },
    refreshChange () {
      this.getList()
      this.toggleSelection()
    },
    refreshList () {
      this.refreshChange()
    },
    selectionChange (list) {
      // this.$message.success('选中的数据' + JSON.stringify(list));
      this.selectList = []
      this.selectList = list
    },
    exportExcel (id) {
      ExportFile('/cost/mrcost/export', { id: id })
    },
    detail (id) {
      this.$refs.detail.init(id)
    },
    handleClose () {
      this.dialogVisible = false
    },
    init (companyId) {
      getDicType('rm_project_buiding_type').then(res => {
        this.buidingOptions = res.data.data
      })
      this.searchForm.projectId = companyId
      this.dialogVisible = true
      this.getList()
      this.toggleSelection()
    },
    toggleSelection (val) {
      if (this.$refs.crud) {
        this.$refs.crud.toggleSelection(val);
      }
    },
    getList (page, params) {
      fetchList(Object.assign({
        current: this.page.currentPage,
        size: this.page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
      this.getList()
    },
    currentChange (current) {
      this.page.currentPage = current
      this.getList()
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>